<template>
    <div>
        <el-card class="box-card" style="height:auto">
            <!-- 头部区域 -->
            <template #header>
                <div class="header" style="font-size: 30px;">
                    <span>{{ homework.name }}</span>
                    <div class="extra">
                        <el-button type="primary" icon="el-icon-plus" @click="drawer=true">作业批改</el-button>
                    </div>
                </div><br>
                <span style="color: gray;">任务内容:&nbsp;{{ homework.content }}</span><br><br>
                <span style="color: gray;">学生姓名:&nbsp;{{ subwork.name }}</span><br>
            </template>
            <el-form label-width="80px">
                <el-form-item label="作业回答:">
                    {{ subwork.content }}
                </el-form-item>

                <el-form-item label="图片:" v-if="this.subwork.image">
                    <div>
                        <el-image v-for="(pic, index) in this.subwork.image" :key="index" :src="pic"
                            style="width: 400px;height: 400px;margin-left: 20px;" :preview-src-list="pic"></el-image>
                    </div>
                </el-form-item>

                <el-form-item label="文档:" v-if="this.subwork.attachment">
                    <el-card v-for="(doc, index) in this.subwork.attachment" :key="index" class="document-card">
                        <!-- <div slot="header">{{ doc }}</div> -->
                        <div class="document-actions">
                            {{ doc }} <a :href="doc" download target="_blank">下载</a>
                        </div>
                    </el-card>
                </el-form-item>
            </el-form>
              <!-- 添加抽屉 -->
              <el-drawer title="批改作业" :visible.sync="drawer" :direction="direction">
                <el-form label-width="100px" :model="subwork" class="addform">
                    <el-form-item label="分数:">
                        <el-input v-model="subwork.grade"></el-input>
                    </el-form-item>
                    <el-form-item label="意见:">
                        <el-input v-model="subwork.feedback"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <template class="tem">
                        <el-button style="margin-left: 50px;" type="primary" @click="sta(),update()">提交</el-button>
                        <el-button style="margin-left: 50px;" @click="drawer=false">取消</el-button>
                        </template>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </el-card>
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            direction: 'rtl',
            drawer: false,
            homeworkId: this.$route.query.homeworkId,
            stuId: this.$route.query.stuId,
            subwork: {
            },
            homework: {

            }
        }
    },
    methods: {
        sta(){
            this.subwork.status='已批改'
        },
        getSubWork() {
            request.get("/subwork/review", {
                params: {
                    homeworkId: this.homeworkId,
                    stuId: this.stuId
                }
            }).then(res => {
                if (res.data.code == '0') {
                    console.log(res.data.data)
                    this.subwork = res.data.data
                } else {
                    this.$message.error("获取失败")
                }
            })
        },
        //作业批改
        update(){
           request.post("/subwork/add",this.subwork).then(res=>{
            if(res.data.code=='0'){
                this.$message.success("批改成功")
                this.drawer=false
            }else{
                this.$message.error("获取失败")
            }
           })
        },
        //Id查找作业信息
        getHomework() {
            request.get("/homework/getByid", {
                params: {
                    id: this.$route.query.homeworkId
                }
            }).then(res => {
                if (res.data.code == '0') {
                    console.log(res.data.data)
                    this.homework = res.data.data
                } else {
                    this.$message.error("获取失败")
                }
            }).catch(error => {
                console.log(new error("服务异常"))
                this.$message.error("服务异常")
            })
        }
    },
    created() {
        this.getSubWork()
        this.getHomework()
    }
}
</script>

<style scoped lang="less">
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.document-card {
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 50px;

}

.document-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.addform {
    .el-input {
        margin-left: 10px;
        width: 70%;
    }
}

.item {
    padding: 18px 0;
}
</style>